<template>
    <div class="register-container">
      <div class="register-card">
        <div class="register-header">
          <h1>社团管理系统</h1>
          <p class="subtitle">创建账号，开启您的社团之旅</p>
        </div>
        <form class="register-form" @submit.prevent="register">
          <div class="form-item">
            <label for="phone">
              <i class="el-icon-mobile-phone"></i>
            </label>
            <input type="text" id="phone" v-model="registerFormData.phone" placeholder="请输入手机号">
          </div>
          <div class="form-item">
            <label for="nickname">
              <i class="el-icon-user"></i>
            </label>
            <input type="text" id="nickname" v-model="registerFormData.nickname" placeholder="请输入昵称">
          </div>
          <div class="form-item">
            <label for="password">
              <i class="el-icon-lock"></i>
            </label>
            <input type="password" id="password" v-model="registerFormData.password" placeholder="请输入密码">
          </div>
          <div class="form-item">
            <label for="confirmPassword">
              <i class="el-icon-key"></i>
            </label>
            <input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="请确认密码">
          </div>
          <div class="form-item">
            <label for="department">
              <i class="el-icon-office-building"></i>
            </label>
            <select id="department" v-model="registerFormData.dept" class="select-input">
              <option value="" disabled selected>请选择院系</option>
              <option v-for="(name, id) in depMap" :key="id" :value="Number(id)">{{ name }}</option>
            </select>
          </div>
          <div class="form-item role-select">
            <label>
              <i class="el-icon-user-solid"></i>
            </label>
            <div class="role-options">
              <div
                class="role-option"
                :class="{'active': registerFormData.role === 1}"
                @click="setRole(1)">
                <span>普通用户</span>
              </div>
              <div
                class="role-option"
                :class="{'active': registerFormData.role === 2}"
                @click="setRole(2)">
                <span>社联成员</span>
              </div>
              <div
                class="role-option"
                :class="{'active': registerFormData.role === 3}"
                @click="setRole(3)">
                <span>管理员</span>
              </div>
            </div>
          </div>
          <div class="form-item" v-if="registerFormData.role === 3">
            <label>
              <i class="el-icon-key"></i>
            </label>
            <input
              type="text"
              v-model="registerFormData.inviteCode"
              placeholder="请输入管理员邀请码">
          </div>
          <button type="submit" class="register-button" :disabled="!isFormValid">
            <span>注册</span>
            <i class="el-icon-right"></i>
          </button>
          <div class="extra-options">
            <span>已有账号？</span>
            <router-link to="/login" class="login-link">立即登录</router-link>
          </div>
        </form>
      </div>
      <div class="decoration-circles">
        <div class="circle circle-1"></div>
        <div class="circle circle-2"></div>
        <div class="circle circle-3"></div>
        <div class="circle circle-4"></div>
      </div>
    </div>
  </template>

  <script>
  import axios from "axios";
  import httpInstance from "@/utils/http";

  export default {
    data() {
      return {
            registerFormData: {
          phone: '',
          nickname: '',
          password: '',
          dept: '',
          role: 1,  // 默认为普通用户
          inviteCode: '' // 添加邀请码字段
        },
        confirmPassword: '',
        depMap: {},
        loading: false
      };
    },
    computed: {
      isFormValid() {
        const baseValidation = this.registerFormData.phone &&
                             this.registerFormData.nickname &&
                             this.registerFormData.password &&
                             this.confirmPassword &&
                             this.registerFormData.dept &&
                             this.registerFormData.password === this.confirmPassword;

        // 如果是超级管理员，还需要验证邀请码
        if (this.registerFormData.role === 3) {
          return baseValidation && this.registerFormData.inviteCode;
        }

        return baseValidation;
      }
    },
    methods: {
      setRole(role) {
        this.registerFormData.role = role;
        // 如果切换到非管理员角色，清空邀请码
        if (role !== 3) {
          this.registerFormData.inviteCode = '';
        }
      },
      async register() {
        if (!this.isFormValid) {
          if (this.registerFormData.role === 3 && !this.registerFormData.inviteCode) {
            this.$message.warning('请输入管理员邀请码');
            return;
          }
          this.$message.warning('请完成所有必填项');
          return;
        }

        if (this.registerFormData.password !== this.confirmPassword) {
          this.$message.error('两次输入的密码不一致');
          return;
        }
        console.log("registerFormData",this.registerFormData);

        this.loading = true;
        try {
          const response = await httpInstance.post("api/user/register", this.registerFormData);

          if (response.code === 200) {
            this.$message.success('注册成功！请登录');
            this.$router.push('/login');
          } else {
            this.$message.error(response.msg || '注册失败，请稍后重试');
          }
        } catch (err) {
          console.error('注册失败:', err);
          this.$message.error('注册失败，请稍后重试');
        } finally {
          this.loading = false;
        }
      },
      async getDepMap() {
        try {
          const res = await httpInstance.get('/api/sys/dep');
          if (res.code === 200) {
            this.depMap = res.data;
          }
        } catch (err) {
          console.error('获取学院列表失败:', err);
          this.$message.warning('获取学院列表失败');
        }
      }
    },
    mounted() {
      this.getDepMap();
    }
  };
  </script>

  <style scoped>
  /* 重置默认样式 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .register-container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
    position: relative;
    overflow: hidden;
    padding: 20px 0;
  }

  .register-card {
    width: 450px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    z-index: 10;
    animation: fadeIn 0.8s ease;
    overflow: hidden;
    position: relative;
  }

  .register-header {
    text-align: center;
    margin-bottom: 30px;
  }

  .register-header h1 {
    color: #333;
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 600;
  }

  .subtitle {
    color: #666;
    font-size: 14px;
  }

  .register-form {
    position: relative;
  }

  .form-item {
    margin-bottom: 25px;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #eee;
    transition: all 0.3s ease;
  }

  .form-item:focus-within {
    border-bottom-color: #4b6cb7;
  }

  .form-item label {
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999;
  }

  .form-item input, .select-input {
    flex: 1;
    padding: 12px 10px;
    border: none;
    outline: none;
    background: transparent;
    color: #333;
    font-size: 16px;
    width: 100%;
  }

  .form-item input::placeholder, .select-input::placeholder {
    color: #aaa;
  }

  .select-input {
    appearance: none;
    cursor: pointer;
  }

  .role-select {
    border-bottom: none;
  }

  .role-options {
    display: flex;
    flex: 1;
    gap: 10px;
  }

  .role-option {
    flex: 1;
    padding: 12px 8px; /* 调整padding以适应三个选项 */
    border: 2px solid #eee;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px; /* 稍微减小字体大小 */
  }

  .role-option:hover {
    border-color: #4b6cb7;
  }

  .role-option.active {
    border-color: #4b6cb7;
    background-color: rgba(75, 108, 183, 0.1);
    color: #4b6cb7;
    font-weight: 500;
  }

  .register-button {
    width: 100%;
    padding: 15px;
    background: linear-gradient(to right, #4b6cb7, #182848);
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(75, 108, 183, 0.4);
  }

  .register-button:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(75, 108, 183, 0.5);
  }

  .register-button:disabled {
    background: linear-gradient(to right, #a9b5d3, #7a8298);
    cursor: not-allowed;
  }

  .register-button span {
    margin-right: 8px;
  }

  .extra-options {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 15px;
    font-size: 14px;
    color: #666;
  }

  .login-link {
    text-decoration: none;
    color: #4b6cb7;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .login-link:hover {
    color: #182848;
  }

  .decoration-circles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(to right, rgba(75, 108, 183, 0.7), rgba(24, 40, 72, 0.7));
    filter: blur(5px);
  }

  .circle-1 {
    width: 200px;
    height: 200px;
    top: -100px;
    right: -50px;
    animation: float 6s ease-in-out infinite;
  }

  .circle-2 {
    width: 300px;
    height: 300px;
    bottom: -150px;
    left: -100px;
    animation: float 8s ease-in-out infinite;
  }

  .circle-3 {
    width: 150px;
    height: 150px;
    top: 40%;
    right: -75px;
    animation: float 7s ease-in-out infinite 1s;
  }

  .circle-4 {
    width: 120px;
    height: 120px;
    top: 20%;
    left: -60px;
    animation: float 5s ease-in-out infinite 2s;
  }

  @keyframes float {
    0% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-20px) scale(1.05);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 响应式设计 */
  @media (max-width: 500px) {
    .register-card {
      width: 90%;
      padding: 30px 20px;
    }

    .register-header h1 {
      font-size: 24px;
    }

    .circle-1, .circle-2, .circle-3, .circle-4 {
      opacity: 0.5;
    }

    .role-options {
      flex-direction: column;
    }

    .role-option {
      padding: 10px;
      margin-bottom: 5px;
    }
  }
  </style>
